<!doctype html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="utf-8">
  <title>每周一讲 磊哥专场</title>
  <meta name="author" content="yisi">

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="超越 icon font">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

  <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, minimal-ui">
  <link rel="stylesheet" href="css/reveal.min.css">
  <link rel="stylesheet" href="css/theme/sky.css" id="theme">

  <!-- For syntax highlighting -->
  <link rel="stylesheet" href="lib/css/zenburn.css">

  <link rel="stylesheet" href="css/demo/icon-github.css">

  <!-- If the query includes 'print-pdf', use the PDF print sheet -->
  <script>
  document.write('<link rel="stylesheet" href="css/print/' + (window.location.search.match(/print-pdf/gi) ? 'pdf' : 'paper') + '.css" type="text/css" media="print">');
  </script>
  <script src="http://g.tbcdn.cn/kissy/k/1.3.2/seed-min.js"></script>

  <!--[if lt IE 9]>
  <script src="lib/js/html5shiv.js"></script>
  <![endif]-->

  <style>
  .summary .line {
    overflow: hidden;
    white-space: nowrap;
  }
  .summary .line a {
    display: table-cell;
    vertical-align: middle;
    width: 180px;
    text-align: center;
  }
  .summary .content {
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
    text-align: left;
    overflow: hidden;
    *zoom:1;
  }
  .powered {
    position: fixed;
    left: 20px;
    bottom: 20px;
    color: #555;
  }
  .powered p {
    margin: 6px auto;
  }
  .powered a {
    color: #555;
  }

  .reveal[data-background-transition=slide]>.backgrounds .slide-background, .reveal>.backgrounds .slide-background[data-background-transition=slide] {
    background-size: contain;
    background-position: 10% 30%;
  }


  .reveal>.backgrounds .slide-background:nth-of-type(1),
  .reveal>.backgrounds .slide-background:nth-of-type(2) {
    background-size: 80%;
    background-position: 50% 30px;
  }

  .reveal>.backgrounds .slide-background:nth-last-of-type(2) {
    background-size: cover;
    background-position: 50% 50%;
  }
  .reveal .author {
    margin-top: 100px;
    font-size: 60px;
  }
  .reveal .title {
    margin-top: 60px;
  }
  .icon-box {
    position: relative;
    background: url(img/photo-icon.svg) 50% 50% no-repeat;
    background-size: 66%;
  }
  .icon-box img {
    width: 66%;
  }
  .fade-box {
    position: relative;
    min-height: 500px;
  }
  .fade-box img {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto !important;
  }
  .qrcode {
    width: 500px;
  }
  .mux-logo {
    position: fixed;
    z-index: 999;
    left: 20px;
    top: 20px;
  }
  .icon-demo {
    margin: 50px auto 0 !important;
    width: 99%;
  }
  .icon-demo .icon-test {
    font-family: icon-test;
    min-height: 160px;
    line-height: 160px;
    border: 1px solid #bbb;
    border-radius: 8px;
    font-size: 200px;
    display: block;
    padding: 3px 0;
    color: cadetblue;
  }
  .icon-demo .icon-test:focus {
    outline: 0 none;
  }
  .icon-test {
    position: relative;
    letter-spacing: .3em;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-user-modify: read-write-plaintext-only; /* 粘贴时过滤富文本 */
  }
  .icon-test:focus {
    outline: 1px solid #66AFE9;
    border-color: #66AFE9;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.56);
  }
  .icon-test pre {
    padding:0 6px;
    letter-spacing: normal;
    overflow: hidden;
    background: none;
    box-shadow: none;
  }
  .icon-test {
    font-family: "icon-test";
    font-size: 50px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    /* 1 */
    speak: none;
    /* 2 */
    -webkit-font-smoothing: antialiased;
    /* 3 */
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: "icon-test";
    font-weight: normal;
    font-style: normal;
    src: url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.eot");
    src: url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.eot?#iefix") format("embedded-opentype"), url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.woff") format("woff"), url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.ttf") format("truetype"), url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.svg#iconfont") format("svg");
}

.user .con{
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  padding-right: 20px;
}
.user .con img {
  max-height: none;
  max-width: 100%;
}
.user .con h3+h3 {
  border-bottom: 2px solid #000;
  min-width: 3em;
  line-height: 1.3;
}
  </style>
  <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
  <script type="text/javascript" src="js/socket.io.min.js"></script>
  <script type="text/javascript" src="js/qrcode.min.js"></script>
  <script type="text/javascript">
  var env;
  $(function() {
    $('#demo-github').click(function() {
      $(this).toggleClass('active');
    })
  })

  $.ajax({
    // url: 'http://localhost:3000/getEnv',
    // dataType: 'jsonp',
    // success: function(data) {
    //   env = data;

    url: 'http://localhost:3000/env',
    dataType: 'jsonp',
    success: function(data){
      env = data;

    // draw qrcode
    var qrcodedraw = new QRCodeLib.QRCodeDraw();
    var request = ['http://', env.ip, ':', env.port, '/mobile/control'].join('');
    qrcodedraw.draw(document.querySelector('.qrcode'), request, function(err){
      if(err){
        return console.log(err.message);
      }
    });
  }
})


  var socket = io.connect('http://localhost:3000');

  socket.on('animate', function() {
    if ($('#qrcode').css('display') !== 'none') {
      $('#demo-github').toggleClass('active');
    }
  })

var socket = io.connect('http://localhost:3000');
socket.emit('ppt');

socket.on('ppt left', function(){
Reveal.left();
});

socket.on('ppt right', function(){
Reveal.right();
});
  </script>
</head>

<body>

  <div class="reveal">
    <!-- Any section element inside of this container is displayed as a slide -->
    <div class="slides">
      <!-- 二维码 -->
      <section data-transition="zoom" data-background="#1C1C1C">
          <img src="img/1.jpg" alt="">
          <p class="fragment fade-up"><font size="50">每 周 一 讲</font></p>
          <p class="fragment fade-up">磊哥专场</p>
      </section>

      <section data-transition="zoom" data-background="#b5533c" >
        <h2 class="">其实呢……</h2>
        <h2 class="fragment">一开始因为没准备</h2> 
        <h2 class="fragment">所以不知道说什么</h2>
      </section>
      <section data-transition="zoom" data-background="#4d7e65" >
          <h2 class="">但是……</h2>
          <h2 class="fragment">大成哥和我说,</h2> 
          <h2 class="fragment">你长的帅，说什么都是对的!</h2>
          
          <img class="fragment" src="img/w/2.gif" width="200" alt="">
      </section>


      <section data-transition="convex" data-background="#336666">
        <h2>在我眼中</h2>
        <h2>我的演讲，应该是这样的</h2>
        <img class="fragment" src="img/24k.gif" width="400" alt="">
      </section>

      <section data-transition="convex" data-background="#4d7e65">
        <h2>事实是？</h2>
        <img class="" src="img/xiamian.gif" width="300" alt="">
      </section>

      <section data-transition="zoom" data-background="#669999">
        <h2>在你们眼中，可能是这样</h2>
        <img class="fragment" src="img/xiaoxian.gif" width="500" alt="">
      </section>

      <section data-transition="concave" data-background="#FF9933">
        <h2 class="fragment">今天讲的是...</p>
        <h2 class="fragment">搭建个人博客</p>
      </section>

      <section data-transition="concave" data-background="#FFFF66">
        <h2>有些人：<span class="fragment">呵呵🙂🙂🙂</span></h2>
        <p class="fragment fade-up"><img src="img/b.jpg" width="500" alt=""></p>
      </section>

      <section data-transition="concave" data-background="#0099CC">
        <h2>1.直接使用博客平台</h2>
        <p class="fragment fade-up"><font size="50" color="#000">简单省事</font></p>
        </p>
        <div class="fade-box">
          <img class="fragment" src="img/jianshu.png" alt="">
          <img class="fragment" src="img/csdn.png" alt="">
          <img class="fragment" src="img/zhihu.png" alt="">
          <img class="fragment" src="img/sina.png" alt="">
        </div>
      </section>

      <section data-transition="fade" data-background="#FFCC00">
        <h2>想要一个独属于自己的博客空间🤔🤔🤔</h2>
        <img src="img/icon.png" alt="">
      </section>

      <section data-transition="fade" data-background="#FF6666">
        <h2>2.虚拟主机+WordPress</h2>
        </p>
        <div class="fade-box">
          <img class="fragment" src="img/w/lgon.png" alt="">
          <img class="fragment" src="img/w/install.png" alt="">
          <img class="fragment" src="img/w/creat.png" alt="">
          <img class="fragment" src="img/w/end.png" alt="">
          <img class="fragment" src="img/w/start.png" alt="">
        </div>
      </section>

      <section data-transition="fade" data-background="#FFFF66">
        <h2>喜欢折腾的话🙄🙄🙄</h2>
        <p class="fragment fade-up"><font size="50" color="#000">Wordpress 需要PHP, MySQL和一个 Web 服务器的环境支持。</font></p>    
        <p class="fragment fade-up"><font size="50" color="#000">就是俗称的：LNMP(linux+nginx+mysql+php)</font></p>
      </section>

      <section data-transition="concave" data-background="#99CC66">
        <h2>3.使用github💚</h2>
        <br/>
          <li>hexo</li>
          <li>jekyll</li>
        
      </section>

      <section data-transition="concave" data-background="#33CC99">
        <h2>两者区别</h2>
        <p class="fragment fade-up"><font size="50" color="#000">一个用 node-js，一个用 Ruby</font></p>
        <p class="fragment fade-up"><font size="50" color="#000">区别就是 JS 的速度几乎比 Ruby 快了一个数量级</font></p>
        <p class="fragment fade-up"><font size="50" color="#000">主题模板也是我比较介意的点🙋</font></p>
      </section>

      <section data-background-transition="slide" data-background="img/desiger.png">
        <h2>前端不是太吊</h2>
        <br/>
        <p class="fragment fade-up"><font size="50" color="#000">你让我自己写个锤子啊</font></p>
        <p class="fragment fade-up"><img src="img/t-red.png" width="200" height="200" alt=""></p>
        
      </section>

      <section data-background-transition="slide" data-background="img/desiger.png">
        <h2>下面重点说下 github + hexo</h2>
      </section>

      <section data-transition="zoom" data-background="#99CC33">
        <h2>1.github账号</h2>
        <br/>
        <p class="fragment fade-up"><font size="50" color="#000">重点 重点 重点</font></p>
        <p class="fragment fade-up"><img src="img/w/1.gif" width="600" height="500" alt=""></p>

      </section>

      <section data-transition="zoom" data-background="#FF6666">
        <h2>2.必要安装</h2>
        <br/>
          <ul>
          <li><a href="https://git-scm.com/downloads/"><font size="50">git</font></a></li>
          <li class=""><a href="http://nodejs.cn/"><font size="50">node.js</font></a></li>
         </ul>
      </section>

      <section data-transition="zoom" data-background="#663399">
        <h2>3.搭建博客环境</h2>
        <br/>
          <li class=""><a href="http://www.cnblogs.com/zhcncn/p/4097881.html"><font size="50">Hexo搭建Github静态博客</font></a></li>
          <li class=""><a href="http://blog.csdn.net/poem_of_sunshine/article/details/29369785/"><font size="50">如何搭建一个独立博客</font></a></li>
      </section>

      <section data-transition="zoom" data-background="#996699">
        <h2>4.选择主题</h2>

        <br/>
          <li class=""><a href="https://hexo.io/themes/"><font size="50">Theme</font></a></li>
          <li class=""><a href="https://www.zhihu.com/question/24422335"><font size="50">知乎推荐</font></a></li>
      </section>

      <section data-transition="zoom" data-background="#336699">
        <h2>5.配置主题</h2>
      </section>
      <section data-transition="zoom" data-background="#006699">
        <h2>运行一下</h2>
        <pre><code>
LeoStones@DESKTOP-12SHSL5 MINGW64 /d/LeostonesBlog/LeoBlog (master)
$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

        </code></pre>
      </section>

      <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
            <h2>... 我的天!</h2>
      </section>

      <section data-transition="zoom" data-background="#CCFFFF">
        <h2>6.熟悉 Markdown 书写方式</h2>
        
        <br/>
          <li class=""><a href="http://lutaf.com/markdown-simple-usage.htm"><font size="50">markdown 简明语法</font></a></li>
      </section>

      <section data-transition="zoom" data-background="#339999">
        <h2>7.讲解下Blog目录👏👏👏</h2>
      </section>

      <section data-background="img/88.jpg">
        <h2>Thank You</h2>
      </section>

    </div>

  </div>

  <div class="powered">
    <p>《每周一讲》磊哥专场</p>
  </div>
  <!--     <div class="mux-logo">
        <img src="http://gtms01.alicdn.com/tps/i1/T1PY5OFBXdXXcMmhDl-216-94.png" alt="">
    </div> -->

  <script src="lib/js/head.min.js"></script>
  <script src="js/reveal.min.js"></script>

  <script>
  // Full list of configuration options available here:
  // https://github.com/hakimel/reveal.js#configuration
  Reveal.initialize({
    controls: true,
    progress: true,
    history: true,
    center: true,
    mouseWheel: false,
    keyboard: true,

    theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
    //transition: Reveal.getQueryHash().transition || 'zoom', // default/cube/page/concave/zoom/linear/fade/none

    // Parallax scrolling
    // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
    // parallaxBackgroundSize: '2100px 900px',

    // Optional libraries used to extend on reveal.js
    dependencies: [{
      src: 'lib/js/classList.js',
      condition: function() {
        return !document.body.classList;
      }
    }, {
      src: 'plugin/markdown/marked.js',
      condition: function() {
        return !!document.querySelector('[data-markdown]');
      }
    }, {
      src: 'plugin/markdown/markdown.js',
      condition: function() {
        return !!document.querySelector('[data-markdown]');
      }
    }, {
      src: 'plugin/highlight/highlight.js',
      async: true,
      callback: function() {
        hljs.initHighlightingOnLoad();
      }
    }, {
      src: 'plugin/zoom-js/zoom.js',
      async: true,
      condition: function() {
        return !!document.body.classList;
      }
    }, {
      src: 'plugin/notes/notes.js',
      async: true,
      condition: function() {
        return !!document.body.classList;
      }
    }]
  });

  $('canvas').on('click', function() {
    socket.emit('clear');
  });
  </script>
    </script>
    <script type="text/javascript" src="js/wilddog.js"></script>
    <script type="text/javascript" src="js/wilddog-sync.js"></script>
    <script type="text/javascript" src="js/controller.js"></script>
</body>

</html>
